<template>
	<view class="container">
		<view class="left-bottom-sign"></view>
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<view class="right-top-sign"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<view class="left-top-sign">FACE</view>
			<view class="welcome">
				人脸录入
			</view>
			<view class="tips">
				<text class="tips-icon">💡</text>
				<text class="tips-text">请确保光线充足，正面拍摄效果最佳</text>
			</view>
			<view class="face-preview" v-if="imagePreview">
				<image :src="imagePreview" mode="aspectFit"></image>
			</view>
			<view class="face-preview placeholder" v-else>
				<text class="placeholder-icon">👤</text>
				<text class="placeholder-text">请选择或拍摄人脸照片</text>
			</view>
			<view class="button-group">
				<button class="action-btn camera-btn" @click="takePhoto" :disabled="uploading">
					<text class="btn-icon">📷</text>
					<text>拍照录入</text>
				</button>
				<button class="action-btn album-btn" @click="chooseImage" :disabled="uploading">
					<text class="btn-icon">🖼️</text>
					<text>相册选择</text>
				</button>
			</view>
			<button class="confirm-btn" @click="submitFace" :disabled="uploading || !imageData">
				{{ uploading ? '录入中...' : '确认录入' }}
			</button>
			<view class="notice">
				<text class="notice-title">📋 注意事项：</text>
				<text class="notice-item">• 请确保人脸清晰可见</text>
				<text class="notice-item">• 建议在光线充足的环境下拍摄</text>
				<text class="notice-item">• 正面拍摄效果最佳</text>
				<text class="notice-item">• 录入后可使用人脸识别快速登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/utils/api.js'
	export default {
		data() {
			return {
				imageData: '', // Base64图片数据
				imagePreview: '', // 图片预览路径
				uploading: false,
			}
		},
		methods: {
			navBack() {
				uni.navigateBack();
			},
			// 拍照
			takePhoto() {
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'], // 只使用相机
					success: (res) => {
						this.handleImage(res.tempFilePaths[0]);
					},
					fail: (err) => {
						console.error('拍照失败', err);
						uni.showToast({
							title: '拍照失败',
							icon: 'none'
						});
					}
				});
			},
			// 选择图像
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'], // 只从相册选择
					success: (res) => {
						this.handleImage(res.tempFilePaths[0]);
					},
					fail: (err) => {
						console.error('选择图片失败', err);
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			},
			// 处理图片：转换为Base64
			handleImage(filePath) {
				this.imagePreview = filePath;
				
				// #ifdef H5
				// H5环境使用FileReader
				uni.request({
					url: filePath,
					method: 'GET',
					responseType: 'arraybuffer',
					success: (res) => {
						// 将 ArrayBuffer 转换为 Base64
						const base64 = uni.arrayBufferToBase64(res.data);
						this.imageData = base64;
						console.log('图片已转换为Base64 (H5)');
						uni.showToast({
							title: '图片已选择',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.error('读取图片失败', err);
						uni.showToast({
							title: '读取图片失败',
							icon: 'none'
						});
					}
				});
				// #endif
				
				// #ifndef H5
				// App和小程序环境使用文件系统API
				uni.getFileSystemManager().readFile({
					filePath: filePath,
					encoding: 'base64',
					success: (res) => {
						this.imageData = res.data;
						console.log('图片已转换为Base64');
						uni.showToast({
							title: '图片已选择',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.error('读取图片失败', err);
						uni.showToast({
							title: '读取图片失败',
							icon: 'none'
						});
					}
				});
				// #endif
			},
			// 提交人脸录入
			async submitFace() {
				if (!this.imageData) {
					uni.showToast({
						title: '请先选择或拍摄照片',
						icon: 'none'
					});
					return;
				}
				
				this.uploading = true;
				try {
					const res = await api.faceRegister({
						imgData: this.imageData
					});
					
					if (res.code == 200) {
						// 录入成功
						uni.showToast({
							title: '人脸录入成功',
							icon: 'success'
						});
						
						// 延迟返回，让用户看到成功提示
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						// 录入失败
						uni.showToast({
							title: res.msg || '人脸录入失败',
							icon: 'none'
						});
						this.uploading = false;
					}
				} catch (err) {
					console.error('人脸录入失败', err);
					uni.showToast({
						title: '录入失败，请重试',
						icon: 'none'
					});
					this.uploading = false;
				}
			}
		}
	}
</script>

<style lang='scss'>
	page {
		background: #fff;
	}

	.container {
		padding-top: 115px;
		position: relative;
		width: 100vw;
		min-height: 100vh;
		overflow: hidden;
		background: #fff;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: $font-color-dark;
	}

	.left-top-sign {
		font-size: 120upx;
		color: $page-color-base;
		position: relative;
		left: -16upx;
	}

	.right-top-sign {
		position: absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;

		&:before,
		&:after {
			display: block;
			content: "";
			width: 400upx;
			height: 80upx;
			background: #ffd4e5;
		}

		&:before {
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}

		&:after {
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
		}
	}

	.left-bottom-sign {
		position: absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #e8e3ff;
		border-radius: 50%;
		padding: 180upx;
	}

	.welcome {
		position: relative;
		left: 50upx;
		top: -90upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
	}

	.tips {
		display: flex;
		align-items: center;
		padding: 0 60upx;
		margin-top: -60upx;
		margin-bottom: 20upx;

		.tips-icon {
			font-size: 32upx;
			margin-right: 10upx;
		}

		.tips-text {
			font-size: $font-sm;
			color: #999;
		}
	}

	.face-preview {
		margin: 40upx 60upx;
		height: 400upx;
		border-radius: 20upx;
		overflow: hidden;
		background: $page-color-light;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		image {
			width: 100%;
			height: 100%;
		}

		&.placeholder {
			border: 3upx dashed #ddd;

			.placeholder-icon {
				font-size: 120upx;
				margin-bottom: 20upx;
				opacity: 0.3;
			}

			.placeholder-text {
				font-size: $font-base;
				color: #999;
			}
		}
	}

	.button-group {
		display: flex;
		justify-content: space-around;
		padding: 0 60upx;
		margin-top: 40upx;
	}

	.action-btn {
		width: 280upx;
		height: 120upx;
		border-radius: 20upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: $font-base;
		border: none;

		&:after {
			border: none;
		}

		.btn-icon {
			font-size: 50upx;
			margin-bottom: 10upx;
		}
	}

	.camera-btn {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}

	.album-btn {
		background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	}

	.confirm-btn {
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 50upx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #fff;
		font-size: $font-lg;

		&:after {
			border-radius: 100px;
		}

		&[disabled] {
			opacity: 0.6;
		}
	}

	.notice {
		margin: 40upx 60upx 0;
		padding: 30upx;
		background: #f7f8fa;
		border-radius: 20upx;
		display: flex;
		flex-direction: column;

		.notice-title {
			font-size: $font-base;
			color: $font-color-dark;
			margin-bottom: 20upx;
			font-weight: bold;
		}

		.notice-item {
			font-size: $font-sm;
			color: #666;
			line-height: 40upx;
		}
	}
</style>

